<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>第三方应用详情</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="goBack"
                >返回
                </el-button
                >
            </div>
            <el-descriptions title="" direction="vertical" :column="5" border size="small">
                <el-descriptions-item label="名称">
                    {{ openThirdDetail.name }}
                </el-descriptions-item>
                <el-descriptions-item label="APP_ID">
                    {{ openThirdDetail.appId }}
                </el-descriptions-item>
                <el-descriptions-item label="APP_SECRET">
                    {{ openThirdDetail.appSecret }}
                </el-descriptions-item>
                <el-descriptions-item label="更新时间">
                    {{ openThirdDetail.updateTime }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>模版草稿箱</span>
            </div>
            <el-table
                id="mainTable"
                :data="templatedRaftList"
                size="small"
                header-cell-class-name="tableHeaderStyle"
                :row-class-name="tableRowClassName">
                <el-table-column
                    prop="draftId"
                    width="80px"
                    label="模版ID">
                </el-table-column>
                <el-table-column
                    prop="userVersion"
                    width="80px"
                    label="版本号">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    width="150px"
                    :formatter="formatTimestamp"
                    label="提交时间">
                </el-table-column>
                <el-table-column
                    prop="userDesc"
                    label="模版描述">
                </el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    align="center"
                    width="120px">
                    <template v-slot="scope">
                        <div>
                            <el-button @click="addTemplate(scope.row)" type="text" size="small">
                                添加到模版库
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>模版列表</span>
            </div>
            <el-table
                id="mainTable"
                :data="templateList"
                size="small"
                header-cell-class-name="tableHeaderStyle"
                :row-class-name="tableRowClassName">
                <el-table-column
                    prop="templateId"
                    width="80px"
                    label="模版ID">
                </el-table-column>
                <el-table-column
                    prop="userVersion"
                    width="80px"
                    label="版本号">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    width="150px"
                    :formatter="formatTimestamp"
                    label="提交时间">
                </el-table-column>
                <el-table-column
                    prop="templateType"
                    :formatter="formatType"
                    width="80px"
                    label="模版类型">
                </el-table-column>
                <el-table-column
                    prop="sourceMiniprogram"
                    width="100px"
                    label="创建小程序">
                </el-table-column>
                <el-table-column
                    prop="developer"
                    width="100px"
                    label="开发者">
                </el-table-column>
                <el-table-column
                    prop="auditStatus"
                    width="100px"
                    :formatter="formatAuditStatus"
                    label="审核状态">
                </el-table-column>
                <el-table-column
                    prop="userDesc"
                    label="模版描述">
                </el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    width="80px">
                    <template v-slot="scope">
                        <div>
                            <el-button @click="onDelete(scope.row)" type="text" size="small">
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog title="添加到模版库" width="30%" :visible.sync="addTemplateDialogVisible">
            <el-form :model="addTemplateForm" label-width="120px" size="small">
                <el-form-item label="模版类型" prop="status">
                    <el-select v-model="addTemplateForm.templateType"
                               placeholder="模版类型">
                        <el-option label="普通模版"
                                   value="0"></el-option>
                        <el-option label="标准模版"
                                   value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addTemplateDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="addTemplateConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {addToTemplate, deleteTemplate, getOpenThirdById, getTemplatedRaftList, getTemplateList} from '@/api/api'

export default {
    name: "OpenThirdDetail",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 5,
                total: 0,
                search: {}
            },

            // ID
            id: '',
            // 第三方平台详情
            openThirdDetail: {},

            templatedRaftList: [],
            templateList: [],

            addTemplateDialogVisible: false,
            addTemplateForm: {},
        }
    },
    methods: {
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            if (row.templateType) {
                return 'success-row';
            }
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        addTemplate(row) {
            this.addTemplateDialogVisible = true;
            this.addTemplateForm.id = this.id;
            this.addTemplateForm.draftId = row.draftId;
            console.log(this.addTemplateForm);
        },
        addTemplateConfirm() {
            addToTemplate(this.addTemplateForm).then(data => {
                this.addTemplateDialogVisible = false;
                this.getData();
            });
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatType: function (row, column, cellValue) {
            if (cellValue == 0) {
                return "普通模版";
            } else if (cellValue == 1) {
                return "标准模版";
            } else {
                return "未知";
            }
        },
        formatAuditStatus: function (row, column, cellValue) {
            if (cellValue == null) {
                return "";
            }
            if (cellValue == 0) {
                return "未提审核";
            } else if (cellValue == 1) {
                return "审核中";
            } else if (cellValue == 2) {
                return "审核驳回";
            } else if (cellValue == 3) {
                return "审核通过";
            } else if (cellValue == 4) {
                return "提审中";
            } else if (cellValue == 5) {
                return "提审失败";
            } else {
                return "未知";
            }
        },
        formatTimestamp: function (row, column, cellValue) {
            return this.GLOBAL.timestampFormat(cellValue);
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteTemplate({id: this.id, templateId: row.templateId}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
        // 获取数据
        getData: function () {
            getOpenThirdById({"id": this.id}).then(data => {
                this.openThirdDetail = data.body;
            });
            getTemplatedRaftList({"id": this.id}).then(data => {
                this.templatedRaftList = data.body.draftList;
            });
            getTemplateList({"id": this.id}).then(data => {
                this.templateList = data.body.templateList;
            });
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    }
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>
